<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Klenwell 3-Column Floating Page Layout Template</title>

<!-- INTERNAL STYLE SHEET -->
<style type="text/css">

/* stylesheet defaults */
h1, h2, h3, h4, h5, h6 { margin:0 0 4px; padding:0; }
p, pre, blockquote, ul, ol, dl, address { margin: 0; padding: 0; }
ul li { list-style:none; margin-left:.5em; }
form, fieldset { margin: 0; padding: 0; }
dd, blockquote { margin-left: .5em; }
form label { cursor: pointer; }
fieldset { border: none; }
input, select, textarea { font-size: 100%; }
table { border-collapse:collapse; }
td { vertical-align:top; }
.clear { clear:both;}
.left { float:left; }
.right { float:right; }

/* body-level settings */
body 
{ 
 margin:0; background-color:#000; 
 background-image:url('');
 background-position:top center;
 background-repeat:repeat-y;
}
.page 
{ 
 width:100%; 
 margin:0 auto; 
 font-family:Arial, Helvetica, sans-serif;
 color:#666;
 border:1px solid #666;  border-width:0px; 
}
a { color:#003366; text-decoration:none; }
a:hover { color:#006600; }

/* core panel */
#core_panel 
{
 margin:0; padding:0;
 background-color:#990000; 
}
#core_panel .left, #core_panel .right
{
 width:200px;
 background-color:#f3f3f3; 
}
#core_panel .child { padding:4px; }
#core_panel .core
{
 margin:0 200px;
 background-color:#fff;
 border:1px solid #ccc; border-width:0 1px;
}

/* masthead */
#masthead_panel 
{
 padding:10px 0;
 color:#f3f3f3;
 background-color:#e3e3e3;
 border:1px solid #ccc; border-width:1px 0;
}
#masthead_panel h1 
{
 margin:0;
 padding-left:8%;
 font-size:44px; 
 font-family:"Trebuchet MS", Helvetica, sans-serif;
 font-weight:normal;
}
#masthead_panel h4
{ 
 margin:0;
 padding-left:8%;
 font-size:20px;
 font-weight:normal; 
}

/* metabar */
#metabar_panel 
{ 
 text-align:right;
 padding:4px;
 font-size:.9em;
 background-color:#eee;  
}
#metabar_panel .left {}
#metabar_panel a { margin:4px; }
#metabar_panel a:hover { }

/* footer */
#footer_panel
{
 margin:0 auto;
 padding:4px 0;
 clear:both;
 text-align:center;
 font:11px/1.4em Verdana, Geneva, sans-serif;
 color:#ccc;
 background-color:#eee;
 border:1px solid #ccc; border-width:1px 0;
}
#footer_panel .left { margin-left:4px; }
#footer_panel .right { margin-right:4px; }
#footer_center { width:80%; margin:0 auto; }
</style>
<!-- end internal style sheet -->

</head>

<body>
<div class="page" id="page_id">

<!-- METABAR -->
<div id="metabar_panel">
<div class="left">metabar .left</div>
<a href="#">link 1</a>
<a href="#">link 2</a>
</div>
<!-- end METABAR -->

<!-- MASTHEAD -->
<div id="masthead_panel">
<h1>page title</h1>
<h4>page subtitle</h4>
</div>
<!-- end MASTHEAD -->

<!-- CORE -->
<div id="core_panel">
<div class="left"><div class="child">core_panel .left</div></div>
<div class="right"><div class="child">core_panel .right</div></div>
<div class="core"><div class="child">core_panel core</div></div>
</div>
<!-- end CORE -->

<!-- FOOTER -->
<div id="footer_panel">
<div class="left">footer left</div>
<div class="right">footer right<br />(validation tag)</div>
<div id="footer_center">footer center</div>
<div class="clear"></div>
</div>
<!-- end FOOTER -->

</div>
</body>
</html>
